<template>
    <div class="wrapper">
        <h1>CustomRef</h1>
        <h2>{{ message }}</h2>
        <input v-model="message" />
    </div>
</template>

<script lang="ts" setup name="CustomRef">

// 普通ref
// import { ref } from 'vue'
// let message = ref('你好')

// 自定义ref
import useMsgRef from '@/hooks/useMsgRef'
let { message } = useMsgRef('你好', 2000)

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>